import one from '../../../theme/main/one.png'
import two from '../../../theme/main/two.png'
import three from '../../../theme/main/three.png'
import four from '../../../theme/main/four.png'



const MenuItem = ({ src, label }) => (
    <div className="flex flex-col text-center">
        <img className="w-[104px] h-[104px]" src={src} alt={label} />
        <span className="text-white text-[28px] mt-[8px]">{label}</span>
    </div>
);


// 主组件，封装整个菜单
const Menu = ({ items }) => (
    <div className="flex justify-between mt-[40px] p-[20px]">
        {items.map((item, index) => (
            <MenuItem key={index} src={item.src} label={item.label} />
        ))}
    </div>
);

// 使用 Menu 组件
const MenuCustom = () => {
    // 菜单项数据
    const menuItems = [
        { src: one, label: '资产' },
        { src: two, label: '充值' },
        { src: three, label: '兑换' },
        { src: four, label: '客服' },
    ];

    return <Menu items={menuItems} />;
};

export default MenuCustom;